<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>视频播放</title>
		<style type="text/css">
			body {
				margin: 0;
			}
			
			.video-area {
				width: 100vw;
				height: 250px;
				background-color: #000000;
			}
			
			.btn {
				display: block;
				margin: 20px auto;
				background-color: #1E91E6;
				border: 0;
				color: #ffffff;
				height: 40px;
				width: 80%;
				font-size: 16px;
				border-radius: 5px;
			}
		</style>	
	</head>
	<body>
		<div class="video-area">
			<video id="myVideo" controls="controls" controlsList="nodownload"></video>
		</div>
		<div class="btn-list">
			<button class="btn" type="button" id="play">播放</button>
			<button class="btn" type="button" id="pause">暂停</button>
			<button class="btn" type="button" id="fullscreen">全屏</button>
		</div>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script type="text/javascript">
			// 取url中的参数值
			function getQuery(name) {
				// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
				let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				if(r != null) {
					// 对参数值进行解码
					return decodeURIComponent(r[2]);
				}
				return null;
			}
			
			let data = getQuery('fileUrl') // 获取 uni-app 传来的值
			let myVideo = document.getElementById("myVideo")
			let videoWidth = window.screen.availWidth
			myVideo.src = data
			myVideo.height = 250
			myVideo.width = videoWidth
			//myVideo.poster = "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png"
		
			var playBtn = document.getElementById('play');
			var pauseBtn = document.getElementById('pause');
			var fullscreenBtn = document.getElementById('fullscreen');
			
			playBtn.addEventListener("click", function(){
			    myVideo.play();
			});
			pauseBtn.addEventListener("click", function(){
				myVideo.pause();
			});
			fullscreenBtn.addEventListener("click", function(){
			    requestFullScreen(myVideo);
			});
			function requestFullScreen(de) {
				if (de.requestFullscreen) {
					de.requestFullscreen();
				} else if (de.mozRequestFullScreen) {
					de.mozRequestFullScreen();
				} else if (de.webkitRequestFullScreen) {
					de.webkitRequestFullScreen();
				}
			}
		</script>
	</body>
</html>